<template>
  <el-dialog :title="title" :visible.sync="showUpdateDialog" width="400px" @close="reset">
    <div class="base-modal-content">
      <!-- 内容主体区域 -->
      <el-input v-if="isUpdateName" v-model="name" :placeholder="$t('common.placeholder.inputAccountName')"></el-input>
      <el-input v-if="isUpdateCellPhone" v-model="cellPhone" :placeholder="$t('common.placeholder.inputServicePhone')"></el-input>
      <el-input v-if="isUpdateWeChat" v-model="wechat" :placeholder="$t('common.placeholder.inputWechatNumber')"></el-input>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showUpdateDialog = false">{{ $t('common.base.cancel') }}</el-button>
      <el-button type="primary" @click="update" :disabled="pending">{{ $t('common.base.confirm') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { t } from '@src/locales'

export default {
  name: 'update-common',
  data() {
    return {
      pending: false,
      showUpdateDialog: false,
      isUpdateName: false,
      isUpdateCellPhone: false,
      isUpdateWeChat: false,
      name: '',
      cellPhone: '',
      wechat: '',
      userId: '',
    }
  }, 
  computed: {
    title() {
      if(this.isUpdateName) return t('updateCommon.title.account')
      if(this.isUpdateCellPhone) return t('updateCommon.title.servicePhone')
      if(this.isUpdateWeChat) return t('updateCommon.title.weChatNumber')
    }
  },
  methods: {
    openDialog(type, user) {
      // name, cellPhone, wechat
      this.reset()
      this.userId = user.userId || ''
      if(type === 'name') {
        this.isUpdateName = true
        this.name = user.displayName || ''
      }else if(type === 'cellPhone') {
        this.isUpdateCellPhone = true
        this.cellPhone = user.cellPhone || ''
      }else if(type === 'wechat') {
        this.isUpdateWeChat = true
        this.wechat = user.wechat || ''
      }
      this.showUpdateDialog = true;
    },
    async update(){
      try {
        if(this.isUpdateName && !this.name.length) return this.$platform.notification({
          title: t('common.base.tip.modifyFail'),
          message: t('common.validate.requiredAccountName'),
          type: 'error'
        })
        if(this.isUpdateCellPhone && !this.cellPhone.length) return this.$platform.notification({
          title: t('common.base.tip.modifyFail'),
          message: t('common.validate.requiredServicePhone'),
          type: 'error'
        })
        // if(this.isUpdateWeChat && !this.wechat.length) return this.$platform.notification({
        //   title: t('common.base.tip.modifyFail'),
        //   message: '微信号不能为空',
        //   type: 'error'
        // })
        const params = {}
        params.userId = this.userId
        let task;
        if(this.isUpdateName) {
          params.name = this.name
          task = this.$http.post('/security/user/name', params, false)
        }
        if(this.isUpdateCellPhone) {
          params.cellPhone = this.cellPhone
          task = this.$http.post('/security/user/updateCellPhone', params, false)
        }
        if(this.isUpdateWeChat) {
          params.wechat = this.wechat
          task = this.$http.post('/security/user/updateWeChat', params, false)
        }
        this.pending = true
        const { status, message } = await task
        this.pending = false
        if (status !== 0) return this.$platform.notification({
          title: t('common.base.tip.modifyFail'),
          message: message || '',
          type: 'error'
        })
        this.$platform.notification({
          title: t('common.base.tip.modifySuccess'),
          type: 'success'
        })
        this.$emit('update')
        this.showUpdateDialog = false
      } catch (e) {
        console.error(e)
        this.pending = false
      }
    },
    reset(){
      this.isUpdateName = false
      this.isUpdateCellPhone = false
      this.isUpdateWeChat = false
      this.name = ''
      this.cellPhone = ''
      this.wechat = ''
      this.showUpdateDialog = false
    }
  },
}
</script>

<style lang="scss" scoped>
::v-deep.el-dialog__headerbtn {
  top: 0!important;
}
.el-dialog__body {
  .el-select {
    width: 100%;
  }
}
</style>